<template>
  <div class="chart" ref="myChart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Chart',
  props: {
    cOption: Object,
  },
  data() {
    return {
      option: {
        title: {
          text: '',
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        color: ['#3eaceb', '#1dc59b', '#eb833e', '#f0b22e'],
        legend: {
          // left: 10,
          top: 0,
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['line', 'bar'/* , 'stack' */]
            },
            saveAsImage: {
              name: '',
            }
          },
        },
        textStyle: {
          fontFamily: 'SourceHanSansCN',
          fontSize: 14,
        },
        xAxis: {
          type: 'category',
          name: '时效',
          nameTextStyle: {
            color: '#999',
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          data: [],
        },
        yAxis: {
          nameTextStyle: {
            color: '#999',
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [],
        grid: {
          left: 50,
          top: 50,
          right: 50,
          bottom: 30
        }
      },
      theChart: null,
    }
  },
  mounted() {
    const that = this;
    this.initChart();
    window.onresize = function () {
      that.resizeChart();
    };
  },
  methods: {
    initChart() {
      this.theChart = echarts.init(this.$refs.myChart);
      this.updateChart();
    },
    updateChart() {
      this.option.title.text = this.cOption.imgName;
      this.option.series = this.cOption.series;
      this.option.yAxis.name = this.cOption.yName;
      this.option.xAxis.data = this.cOption.xData;
      this.theChart && this.option && this.theChart.setOption(this.option, true);
    },
    resizeChart() {
      this.theChart.resize();
    },
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>